<template>
	<view class="box-theme-rows">
		<view v-for="item in arr_thme.value" :key="item.id" class="row">
			<ThemeRowVue :category="item.category" :name="item.name" />
		</view>
		<Barload :status="barload_status" />
	</view>
</template>

<script setup>
import ThemeRowVue from './ThemeRow.vue'
import { get_theme } from '../../../api'
import { onBeforeMount, reactive, ref } from 'vue'
import { onReachBottom } from '@dcloudio/uni-app'

const arr_thme = reactive({ value: [] })
const barload_status = ref('loading')
let page = 1

// barload_status.value=='no-more'
const api_get_theme = async function (is_add = false) {
	if (barload_status.value == 'no-more') return

	let res = await get_theme(page, 2)

	// 如果返回来的数据比请求的少那没了
	if (res.data.length < 2) barload_status.value = 'no-more'

	if (is_add) {
		arr_thme.value = [...arr_thme.value, ...res.data]
	} else {
		arr_thme.value = res.data
	}
	page++
}

const go_classify = function () {
	uni.switchTab({
		url: '/pages/classify/classify'
	})
}

onBeforeMount(() => {
	api_get_theme()
})

onReachBottom(() => {
	api_get_theme(true)
})
</script>

<style scoped lang="scss">
.box-null {
	width: 100%;
	height: 150rpx;
	@extend .f-c-c-n;
	.text {
		color: $my-color1;
	}
}
</style>
